<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<view class="inner">
			<!-- <view class="activity-name">
				邮惠云团
			</view> -->
			<view class="activity-times">
				{{ vdata.numEveryoneText }}
			</view>
			<view class="activity-time">
				限时活动：{{ dayjs(vdata.activityDetail.startTime).format('M[月]D[日]') }} ~ {{ dayjs(vdata.activityDetail.endTime).format('M[月]D[日]') }}
			</view>
			<!-- <view class="activity-coupon">
				<text>￥</text>
				<text>{{ vdata.couponPriceTotal }}</text>
			</view> -->
			<view class="sq-state" :style="activityJson?.btn?.style" @click="goToCoupon">已授权，去领券</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	
	const vdata = reactive({
		btnConfig: {	// 按钮配置
			isExit: 0,	// 点击是否退出小程序 默认不 只有存在未使用卡券的情况下 才为1 退出 2 导航到商家列表
			text: '导航到商家列表',	// 按钮文案
		},
		numEveryoneText: '',	// 每人可领取次数文案 只有通过扫码进入小程序 才会有该文案
		activityDetail: {}, // 活动详情
		// couponPriceTotal: 0,	// 卡券总额
	})
	
	//  默认动态参数 防止未配置的情况下 页面错乱
	// #ifdef MP-YHDD
	const bgImgUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f15cf406-496b-44b0-a5f4-16a77ad92932.png'
	// #endif
	// #ifndef MP-YHDD
	const bgImgUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fcca73b3-5a89-4309-a950-21ff54b4611b.png'
	// #endif
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":`url(${bgImgUrl}) no-repeat left top / 100% 1448rpx, #e72118`
			}
		},
		"btn":{
			"style":{
				"color":"#fff",
				"background":"linear-gradient(to bottom, #e72118, #ed322b, #f0514b, #ed322b, #e72118)"
			}
		}
	})

	// 根据传递过来的卡券状态 优先展示该状态的卡券列表
	onLoad(async ({ activityId, activityDetail }) => {
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '神券大派发'
		})
	})
	/**
	 * 扫码派券
	 */
	const goToCoupon = () => {
		// 直接跳转 我的页面并展开会员码
		uni.reLaunch({
			url: `/pages/user/user?open=${1}`
		})
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		position: relative;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		overflow: hidden;
		
		/* #ifdef MP-YHDD */
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f15cf406-496b-44b0-a5f4-16a77ad92932.png') no-repeat left top / 100% 1448rpx,#e72118;
		/* #endif */
		/* #ifndef MP-YHDD */
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fcca73b3-5a89-4309-a950-21ff54b4611b.png') no-repeat left top / 100% 1448rpx,#e72118;
		/* #endif */
		
		.inner {
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			// background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e3d7a450-dc66-4b91-b666-cc3e2926f5ca.png') no-repeat left top / 100% 100%;
			margin-top: 730rpx;
			
			.activity-name{
				padding-top: 50rpx;
				transform: rotateZ(-4deg);
				text-align: center;
				font-family:YouSheBiaoTiHei;
				font-size:150rpx;
				color:rgb(255, 248, 245);
				text-shadow:4px 4px #fa6c3d, 4px 8px rgba(0,0,0,0.5);
			}
			.activity-times{
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				min-height: 50rpx;
			}
			.activity-time {
				text-align: center;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
			.activity-coupon{
				width: 100%;
				text-align: center;
				transform: rotateZ(3deg);
				text{
					font-family:YouSheBiaoTiHei;
					color:rgba(255, 40, 30, 0.7);
					text-shadow:1px 1px 4px #fff, 0 0 0 #000;
					&:nth-child(1){
						font-size:70rpx;
						letter-spacing: -15px;
					}
					&:nth-child(2){
						font-size:100rpx;
					}
				}
			}
			
			.sq-state {
				margin: 450rpx auto 0;
				border-radius: 55rpx 55rpx 55rpx 55rpx;
				font-size: 40rpx;
				text-align: center;
				padding: 24rpx 0;
				width: calc(100% - 56rpx);
				
				color: #fff;
				text-shadow: 4rpx 8rpx 8rpx rgba(0, 0, 0, 0.9);
				box-shadow: inset 4rpx 4rpx 8rpx #f9ab7f, inset -4rpx -6rpx 8rpx #f9ab7f;
				background: linear-gradient(to bottom, #e72118, #ed322b, #f0514b, #ed322b, #e72118);
			}
		}
	}
</style>